<template>
  <div>
    <van-sticky>
      <div class="redTltle">
        <van-row>
          <van-col span="2">
            <van-icon name="arrow-left" @click="routerBack"/>
          </van-col>
          <van-col span="5" offset="8">
            <div class="redTltle">专家学者</div>
          </van-col>
        </van-row>
      </div>
      <!--    搜索框-->
      <div style="padding: 0.3rem 0.2rem;background-color: #efefef">
        <van-row>
          <van-col span="5" class="bgimg">
            <!--          <div>-->
            <!--            {{value}}-->
            <!--          </div>-->
            <van-field
                readonly
                clickable
                :value="value"
                :placeholder="columns[0].name"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                  show-toolbar
                  value-key="name"
                  :columns="columns"
                  @cancel="showPicker = false"
                  @confirm="onConfirm"
              />
            </van-popup>
          </van-col>
          <van-col span="16">
            <van-cell-group>
              <van-field v-model="searchValue" placeholder="专家学者搜索"/>
            </van-cell-group>
          </van-col>
          <van-col span="3">
            <div class="searchBtn" @click="searchBtn">
              检索
            </div>
          </van-col>

        </van-row>
      </div>
      <!--    搜索框end-->
      <!--    小标题-->
      <div class="bookpage">
        <div>
          <div>找到{{ count }}条</div>
        </div>
        <div @click="show = true">
          <van-icon name="filter-o"/>
          筛选
        </div>
        <!--        <van-row>-->
        <!--          <van-col span="10" offset="1">-->

        <!--          </van-col>-->
        <!--          &lt;!&ndash;        <van-col span="1" offset="16"> <van-icon name="filter-o" /></van-col>&ndash;&gt;-->
        <!--          &lt;!&ndash;        <van-col span="2"><div>筛选</div></van-col>&ndash;&gt;-->
        <!--        </van-row>-->
      </div>
      <!--    小标题en'd-->
      <van-popup v-model="show" position="right" :style="{ width: '70%',height:'100%' }">

        <van-tree-select
            :items="item"
            :active-id.sync="activeId"
            :main-active-index.sync="activeIndex"
        />
        <div class="mdtextBox">
          <div class="boxTwo">
            <div @click="Reset">
              重置
            </div>
            <div @click="searchBtn">
              确定
            </div>
          </div>
        </div>
      </van-popup>
    </van-sticky>
    <!--    list-->
    <div class="bookListbox">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
        >
          <div class="bookList">
            <div v-for="(item , index) in imgBook" :key="index" class="items" @click="bookDetails(item , index)">
              <div class="imglistbox">
                <van-image
                    width="2.88rem"
                    height="2.867rem"
                    :src="item.img"
                />
              </div>
              <div class="bookTitlt">
                {{ item.name }}
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!--    list-->
  </div>
</template>

<script>
import {ExpertResource1, GetExpertPicture, GetRegion} from '@/api/journalApi/expertListApi'
import {Toast} from "vant";

export default {
  name: "expertList",
  data() {
    return {
      arr2: [],
      item: [
        {
          // 导航名称
          text: '华北',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '温州',
              // id，作为匹配选中状态的标识符
              id: 1,
            },
            {
              text: '杭州',
              id: 2,
            },
          ],
        }
      ],
      activeId: [],
      activeIndex: 0,
      show: false,
      asd: 2,
      code: '作者',//默认下拉的code
      page: 1,
      ip: 'https://c61.cnki.net/CJFD/big/', //热门文章拼接url
      count: 0,
      loading: false,  //是否底部加载更多处于加载状态   底部加载中
      finished: false, //是否加载完成 加载完成 不在加载    已经底了
      refreshing: false, //是否处于下拉刷新状态  顶部刷新中
      value: '作者', //下拉值
      searchValue: '',//输入值
      showPicker: false, //遮罩层
      columns: [{name: '作者', code: '作者'}, {name: '机构', code: '机构'}],
      PeopleListImg: [],
      aaa: [],
      imgBook: [],
    };
  },
  created() {
    let authorimgList = {
      "name": "",
      "page": 1,
      "pageSize": 12,
      "sysCodeList": [],
      "organ": ""
    }
    //作者请求
    ExpertResource1(authorimgList)
        .then(res => {
          // console.log(res.data.data)
          this.count = res.data.data.count  //总条数
          this.PeopleListImg = res.data.data.list
        //  console.log(this.PeopleListImg)
          for (let i = 0; i < 12; i++) {
            GetExpertPicture({
              tableName: this.PeopleListImg[i].tableName,
              picture: this.PeopleListImg[i].picture
            })
                .then(res => {
                  let bytes = new Uint8Array(res.data.data)
                  // console.log(res.data)
                  let storeData = ''
                  let len = bytes.byteLength
                  for (let i = 0; i < len; i++) {
                    storeData += String.fromCharCode(bytes[i])
                  }
                  this.imgBook.push({
                    id: this.PeopleListImg[i].id, name: this.PeopleListImg[i].name,
                    img: "data:image/png;base64," + window.btoa(storeData)
                  })
                  // this.aaa.push("data:image/png;base64,"+window.btoa(storeData))
                  // console.log(this.PeopleListImg)
                  // console.log(this.aaa)
                })
                .catch(err => console.log(err))
          }
          if (this.imgBook.length >= this.count) {  //如果总条数
            this.finished = true;
            // console.log('到底2了')
          }
        })
        .catch(err => {
         // console.log(err)
        })
    //筛选请求
    GetRegion()
        .then(res => {
          //console.log(res.data.data)
          this.item = res.data.data
          for (let i = 0; i < this.item.length; i++) {
            this.item[i].children = this.item[i].childTreeList
            this.item[i].text = this.item[i].name
            for (let j = 0; j < this.item[i].children.length; j++) {
              this.item[i].children[j].text = this.item[i].children[j].name
              this.item[i].children[j].id = this.item[i].children[j].sysCode
            }
          }
         // console.log(this.item)
        })
  },
  methods: {
    search(authorimgList) {
      ExpertResource1(authorimgList)
          .then(res => {
            // console.log(res.data.data)
            this.count = res.data.data.count  //总条数
            this.PeopleListImg = res.data.data.list
            // console.log(this.PeopleListImg)
            //判断 如果没有搜索到 返回list为空数组 那么那就为空 img的list就为空
            if (this.PeopleListImg.length < 1 && this.imgBook.length > this.count) {
              this.imgBook = []
             // console.log('aaaaaaaaaasdsad')
            }
            for (let i = 0; i < this.PeopleListImg.length; i++) {
              GetExpertPicture({
                tableName: this.PeopleListImg[i].tableName,
                picture: this.PeopleListImg[i].picture
              })
                  .then(res => {
                    let bytes = new Uint8Array(res.data.data)
                    // console.log(res.data)
                    let storeData = ''
                    let len = bytes.byteLength
                    for (let i = 0; i < len; i++) {
                      storeData += String.fromCharCode(bytes[i])
                    }
                    this.imgBook.push({
                      id: this.PeopleListImg[i].id, name: this.PeopleListImg[i].name,
                      img: "data:image/png;base64," + window.btoa(storeData)
                    })
                    // console.log(this.PeopleListImg)

                    // this.aaa.push("data:image/png;base64,"+window.btoa(storeData))
                    // console.log(this.PeopleListImg)
                    // console.log(this.aaa)
                  })
                  .catch(err => console.log(err))
            }

          })
          .catch(err => {
            console.log(err)
          })

    },
    //返回按钮
    routerBack() {
      this.$router.go(-1)
    },
    //无限加载函数
    onLoad() {
      setTimeout(() => {
        //下拉刷新 数据清零
        if (this.refreshing) {
          this.imgBook = []
          this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
          this.page = 1
         // console.log('第' + this.asd + '个')
        }
        //判断上滑加载
        var list = {
          "sysCodeList": [],
          "page": this.asd++,   //因为有第一页数据 所以从第二页自增长
          "pageSize": 12,
          "name": this.searchValue,
          "organ": this.searchValue,
        }
        if(this.code == '作者'){
          list.name = this.searchValue
          list.organ = ''
        }else {
          list.name = ''
          list.organ = this.searchValue
        }
       // console.log('第' + this.asd + '个')
      //  console.log(this.page)
        // 加载无限下划请求
        this.search(list)

        // .then(res=>{
        //   console.log(list)
        //   this.count = res.data.data.count  //总条数
        //   this.imgBook.push.apply( this.imgBook,res.data.data.list)  //合并请求数组
        // })
        // console.log(this.count)
        // console.log('到底了')
        // console.log(this.imgBook.length)
        this.loading = false;
        //总长度和总页数相等 停止请求回调
        if (this.imgBook.length >= this.count) {  //如果总条数
          this.finished = true;
          // console.log('到底2了')
        }
      }, 1000);
    },

    //下拉刷新完成回调函数 数据重新加载
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //下拉刷新 数据清零
      if (this.refreshing) {
        this.imgBook = []
        this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
        // console.log('第一个')
      }
      // 重新加载数据
      // // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true;
      //判断上滑加载是发行党校 还是相关党校

      var list = {
        "sysCodeList": [],
        "page": 1,   //因为有第一页数据 所以从第二页自增长
        "pageSize": 12,
        "name": this.code,
        "organ": this.searchValue,
      }
      // 加载无限下划请求
      this.search(list)
      Toast.success('刷新成功');
      // .then(res=>{
      //   // console.log(list)
      //   this.count = res.data.data.count  //总条数
      //   this.imgBook = res.data.data.list
      //   Toast.success('刷新成功');
      //   // this.imgBook.push.apply( this.imgBook,res.data.data.list)  //合并请求数组
      // })


      // this.onLoad();

    },

    //搜索按钮
    searchBtn() {
      let list = {
        "sysCodeList": this.activeId,
        "page": 1,   //因为有第一页数据 所以从第二页自增长
        "pageSize": 12,
        "name": '',
        "organ": '',
      }
      if(this.code == '作者'){
       list.name = this.searchValue
        list.organ = ''
      }else {
        list.name = ''
        list.organ = this.searchValue
      }

      ExpertResource1(list)
          .then(res => {
            // console.log(res.data.data)
            this.count = res.data.data.count  //总条数
            this.PeopleListImg = res.data.data.list
            // console.log(this.PeopleListImg)
            //判断 如果没有搜索到 返回list为空数组 那么那就为空 img的list就为空
            if (this.PeopleListImg.length < 1 && this.imgBook.length > this.count) {
              this.imgBook = []
           //   console.log('aaaaaaaaaasdsad')
            }
            this.imgBook = []
            for (let i = 0; i < this.PeopleListImg.length; i++) {
              GetExpertPicture({
                tableName: this.PeopleListImg[i].tableName,
                picture: this.PeopleListImg[i].picture
              })
                  .then(res => {
                    let bytes = new Uint8Array(res.data.data)
                    // console.log(res.data)
                    let storeData = ''
                    let len = bytes.byteLength
                    for (let i = 0; i < len; i++) {
                      storeData += String.fromCharCode(bytes[i])
                    }

                    this.imgBook.push({
                      id: this.PeopleListImg[i].id, name: this.PeopleListImg[i].name,
                      img: "data:image/png;base64," + window.btoa(storeData)
                    })
                    // console.log(this.PeopleListImg)

                    // this.aaa.push("data:image/png;base64,"+window.btoa(storeData))
                    // console.log(this.PeopleListImg)
                    // console.log(this.aaa)

                  })
                  .catch(err => console.log(err))
            }
            this.show = false
            if(this.imgBook.length = 0){

              Toast.success('暂无数据');
            }
          })

          .catch(err => {
            console.log(err)
          })


    },
    onConfirm(value) {
      //console.log(value)
      this.value = value.name;
      this.code = value.code;
      this.showPicker = false;
      this.page = 1
      let list = {
        "type": this.categoryIndex,
        "sortCodeList": [],
        "page": 1,
        "pageSize": 18,
        searchType: value.code,
        searchValue: this.searchValue,
      }
      search(list)
          .then(res => {
            // console.log(res.data.data.list)
            this.count = res.data.data.count
            // console.log(this.imgBook)
            // this.imgBook.push(res.data.data.list)
            this.imgBook.push.apply(this.imgBook, res.data.data.list)
            // console.log(this.imgBook)
          })

    },
    bookDetails(item, index) {
     // console.log(item)
      this.$router.push({path: '/expertPeople', query: {ids: item.id, img: item.img, name: item.name}})
    },
    Reset() {

     this.activeId = []

    }

  },
}
</script>

<style scoped>
.bookTitlt {
  margin-top: 0.2rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: PingFang-SC-Regular;
  font-size: 0.32rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}

.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
  /*margin-bottom: 0.3rem;*/
}

.bookList {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

.bookListbox {
  width: 9.8rem;
  margin: 0 auto;
  margin-bottom: 1.5rem;
}

.items {
  margin: 0.1rem 0.19rem;
}

.bookpage {
  background-color: white;
  /*margin: 0.3rem 0;*/
  width: 100%;
  height: 1.187rem;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  display: flex;
  color: black;
  border: solid 0.013rem #eaeaea;
  line-height: 1.187rem;
}

.bookpage > div:first-child {
  margin-left: 0.3rem;
  width: 7.28rem;
  border-right: solid 0.013rem #eaeaea;
}

.bookpage > div:last-child {
  padding-left: 0.693rem;
}

.searchBtn {
  background-color: #af2536;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  width: 1.2rem;
  height: 1.04rem;
  line-height: 1.04rem;
  text-align: center;
  background-color: #929292;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  opacity: 0.8;
}

.active {
  background-color: #af2536;
  color: #ffffff !important;

}

.bgimg {
  background-image: url('../../assets/label.png');
  background-size: 100% 100%;
  width: 2rem;
  height: 1.05rem;
  line-height: 44px;
  text-align: center;
  font-size: 0.293rem;
  /*background-color: #1b6d85;*/
  /*z-index: 999;*/
  /*padding: 10px 16px;*/
  /*border-right: 1px gray solid;*/
}

.imglistbox {
  width: 2.88rem;
  height: 2.867rem;
  background-color: #af2536;
  border-radius: 0.053rem;
}

.mdtextBox {
  width: 100%;
  height: 0.853rem;
}

.boxTwo {
  width: 3.63rem;
  height: 0.853rem;
  display: flex;
  margin: 0 auto;
  /*background-color: #af2536;*/
  /*border-radius: 0rem 0.4rem 0.4rem 0rem;*/
}

.boxTwo > div:first-child {
  width: 1.813rem;
  height: 0.853rem;
  line-height: 0.853rem;
  text-align: center;
  border-radius: 0.4rem 0rem 0rem 0.4rem;
  border: solid 0.013rem #af2536;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #af2536;
}

.boxTwo > div:last-child {
  width: 1.813rem;
  height: 0.853rem;
  line-height: 0.853rem;
  border: solid 0.013rem #af2536;
  text-align: center;
  background-color: #af2536;
  border-radius: 0rem 0.4rem 0.4rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #f0f0f0;
}
</style>
